Populating the grid

Once you have added the grid to your application, like most other grids,you can populate it using the ItemsSource property. The ItemsSource property expects an object that implements the IEnumerable interface, but in most cases you work at a slightly higher level and use an object that implements the ICollectionView interface.

The ICollectionView interface is the main data-binding interface in Silverlight and WPF (in WinForms, that role was played by the IBindingList interface).

ICollectionView is a rich interface. In addition to enumerating the data items, it provides sorting, filtering, paging, grouping, and currency management services.

Silverlight provides a PagedCollectionView class that implements the ICollectionView interface. The PagedCollectionView constructor takes an IEnumerable object as a parameter and automatically provides all ICollectionView services. WPF provides similar classes, such as ListCollectionView.

For example, to display a list of customer objects in a C1FlexGrid Silverlight application, use code such as this:

C#	Copy Code
List<Customer> list = GetCustomerList(); PagedCollectionView view = new PagedCollectionView(list); _flexGrid.ItemsSource = view;

You can also bind the grid directly to the customer list. But binding to an ICollectionView is usually a better idea because it retains a lot of the data configuration for the application, and that can be shared across controls.

If many controls are bound to the same ICollectionView object, they all show the same view. Selecting an item in one control automatically updates the selection on all other bound controls. Filtering, grouping, or sorting are also shared by all controls bound to the same view.

The code above causes the grid to scan the data source and automatically generate columns for each public property of the items in the data source. You can customize automatically created columns using code. Or you can disable automatic column generation altogether and create the columns yourself, in code or in XAML.

For example, the XAML below disables the automatic column generation and specifies the columns in XAML instead:

C1FlexGrid XAML	Copy Code
<!-- create columns on a C1FlexGrid --> <fg:C1FlexGrid x:Name="_flexiTunes" AutoGenerateColumns="False" > <fg:C1FlexGrid.Columns> <fg:Column Binding="{Binding Name}" Header="Title" AllowDragging="False" Width="300"/> <fg:Column Binding="{Binding Duration}" HorizontalAlignment="Right" /> <fg:Column Binding="{Binding Size}" HorizontalAlignment="Right" /> <fg:Column Binding="{Binding Rating}" Width="200" HorizontalAlignment ="Center" /> </fg:C1FlexGrid.Columns> </fg:C1FlexGrid>

C1FlexGrid XAML

Copy Code

<!-- create columns on a C1FlexGrid -->
<fg:C1FlexGrid x:Name="_flexiTunes"
     AutoGenerateColumns="False" >
   <fg:C1FlexGrid.Columns>
     <fg:Column Binding="{Binding Name}" Header="Title"
         AllowDragging="False" Width="300"/>
     <fg:Column Binding="{Binding Duration}"
         HorizontalAlignment="Right" />
     <fg:Column Binding="{Binding Size}"
         HorizontalAlignment="Right" />
     <fg:Column Binding="{Binding Rating}" Width="200"
         HorizontalAlignment ="Center" />
   </fg:C1FlexGrid.Columns>
</fg:C1FlexGrid>

This is similar to the XAML you use to accomplish the same task using the Microsoft DataGrid or the original ComponentOne DataGrid controls:

DataGrid XAML	Copy Code
<!-- create columns on an MSDataGrid (or C1DataGrid) --> <ms:DataGrid Name="_msSongs" AutoGenerateColumns="False" > <ms:DataGrid.Columns> <ms:DataGridTextColumn Binding="{Binding Name}" Header="Title" CanUserReorder="False" Width="300" /> <ms:DataGridTextColumn Binding="{Binding Duration}" /> <ms:DataGridTextColumn Binding="{Binding Size}" /> <ms:DataGridTextColumn Binding="{Binding Rating}" Width="200" /> </ms:DataGrid.Columns> </ms:DataGrid>

DataGrid XAML

Copy Code

<!-- create columns on an MSDataGrid (or C1DataGrid) -->
<ms:DataGrid Name="_msSongs"
     AutoGenerateColumns="False" >
   <ms:DataGrid.Columns>
     <ms:DataGridTextColumn Binding="{Binding Name}" Header="Title"
         CanUserReorder="False" Width="300" />
     <ms:DataGridTextColumn Binding="{Binding Duration}" />
     <ms:DataGridTextColumn Binding="{Binding Size}" />
     <ms:DataGridTextColumn Binding="{Binding Rating}" Width="200" />
   </ms:DataGrid.Columns>
</ms:DataGrid>

As you can see, the syntax is virtually identical. Notice that you can use the binding as an indexer into the grid's Columns collection. For example, if you wanted to make the "Rating" column 300 pixels wide using code, you could write this:

C#	Copy Code
_flexiTunes.Columns["Rating"].Width = new GridLength(300);

This syntax is familiar to C1FlexGrid users. It is exactly the same command you use when working with the WinForms version of the control.

WPF Reference

Silverlight Reference